<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="user/index/include_file::header"></head>
<body>
<nav th:include="user/index/include_file::nav"
     class="navbar navbar-default navbar-custom navbar-fixed-top"></nav>
<header class="intro-header"
        style="background-image: url('/img/blog/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="site-heading">
                    <span class="subheading">多媒体素材系统</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div id="incomeNum"></div>
            <div class="clearfix">
                <p id="flagLoaded" style="display: none; text-align: center;">
                    已全部加载</p>
                <a id="flagLoad" style="display: none;"
                   class="btn btn-secondary float-right"
                   href="javascript:void(0)" onclick="nextPage()">更早 &rarr;</a>
            </div>
        </div>
    </div>
</div>
</body>
<div th:include="user/index/include_file::footer"></div>
<script type="text/javascript">
    var limit = 10;
    var currentPage = 0;
    var total;
    $(function () {
        bindList(0);

    });

    function nextPage() {
        bindList(currentPage * limit)
    }

    function bindList(offset) {
        $('#incomeNum').html("");
        $
            .ajax({
                url: '/common/collection/minecollection?limit=10&offset=' +
                offset,
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    var rows = data.rows;
                    total = data.total;
                    var htmlText = "";
                    for (var i = 0; i < rows.length; i++) {
                        htmlText += '<div class="post-preview">';
                        if(rows[i].fileType==0){
                            htmlText +=
                                '<img  style="width: 400px;height: 400px;" src="' +
                                rows[i].fileUrl + '">';
                        }else if(rows[i].fileType==1){
                            htmlText += '<a href="' +
                                rows[i].fileUrl + '"></a>';
                        }else if(rows[i].fileType==2){
                            htmlText +=
                                '<video style="width: 400px;height: 400px;" controls="controls" src="' +
                                rows[i].fileUrl + '"></video>';
                        }else if(rows[i].fileType==3){
                            htmlText +=
                                '<audio  controls="controls" src="' +
                                rows[i].fileUrl + '"></audio>';
                        }
                        htmlText += '<p class="post-meta">收藏时间'
                            + rows[i].createTime
                            + ' &nbsp;&nbsp; '
                        htmlText+='<button onclick="remove('+rows[i].id+')" class="btn-primary">取消收藏</button>&nbsp;&nbsp;</p>';
                        htmlText += '</div>';
                        htmlText += '<hr>';
                    }
                    $("#incomeNum").append(htmlText);
                    document.getElementById("flagLoad").style.display = "block";
                    currentPage++;
                    if (total <= currentPage * limit) {
                        document.getElementById("flagLoaded").style.display = "block";
                        document.getElementById("flagLoad").style.display = "none";
                    }
                }
            });
    }
    
    function remove(id) {
        layer.confirm("确认要要取消该文件的收藏吗?", {
            btn: ['确定', '取消']
            // 按钮
        }, function () {
            $.ajax({
                url: "/common/collection/remove",
                type: "post",
                data: {
                    'id': id
                },
                success: function (r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        bindList(0);
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        });
    }
</script>
</html>
